 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     background-color: #f5f7f9;
 }

 .container {
     display: flex;
     min-height: 100vh;
 }

 /* 左侧边栏样式 */
 .sidebar {
     width: 200px;
     background-color: white;
     border-right: 1px solid #eee;
     padding: 20px;
     display: flex;
     flex-direction: column;
     height: 100vh;
 }

 .brand {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
 }

 .brand img {
     width: 32px;
     height: 32px;
     margin-right: 8px;
 }

 .brand-text {
     font-size: 16px;
     font-weight: 500;
 }

 .user-info {
     display: flex;
     align-items: center;
     padding: 10px 0;
     margin-bottom: 20px;
 }

 .user-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-right: 10px;
 }

 .user-name {
     font-size: 14px;
     color: #333;
 }

 .nav-menu {
     list-style: none;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .nav-item {
     padding: 12px;
     margin: 4px 0;
     border-radius: 6px;
     cursor: pointer;
     display: flex;
     align-items: center;
     color: #666;
     text-decoration: none;
 }

 .nav-item:hover {
     background-color: #f0f2f5;
 }

 .nav-item.active {
     background-color: #e6f7ff;
     color: #1890ff;
 }

 .logout-item {
     margin-top: auto;
     color: #ff4d4f;
     border-top: 1px solid #eee;
     padding-top: 20px;
 }

 /* 主内容区域样式 */
 .main-content {
     flex: 1;
     padding: 24px;
 }

 /* 聊天界面样式 */
 .chat-content {
     margin: -24px;
     height: 100vh;
     background: #fff;
 }

 .chat-container {
     display: flex;
     height: 100%;
 }

 /* 左侧聊天列表样式 */
 .chat-left {
     width: 300px;
     border-right: 1px solid #eee;
     display: flex;
     flex-direction: column;
 }

 .student-info {
     padding: 20px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #eee;
 }

 .student-avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     margin-right: 12px;
 }

 .student-details {
     flex: 1;
 }

 .student-details .name {
     font-weight: 500;
     font-size: 16px;
 }

 .student-details .role {
     color: #666;
     font-size: 12px;
 }

 .settings-btn {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 20px;
 }

 .search-wrapper {
     padding: 15px;
 }

 .chat-search {
     width: 100%;
     padding: 8px 12px;
     border: 1px solid #eee;
     border-radius: 4px;
     background: #f5f5f5;
 }

 .recent-label {
     padding: 10px 15px;
     color: #666;
     font-size: 14px;
 }

 .chat-list {
     overflow-y: auto;
 }

 .chat-item {
     display: flex;
     align-items: center;
     padding: 12px 15px;
     cursor: pointer;
 }

 .chat-item:hover {
     background: #f5f5f5;
 }

 .chat-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-right: 12px;
 }

 .chat-preview {
     flex: 1;
 }

 .chat-name {
     font-weight: 500;
     margin-bottom: 4px;
 }

 .chat-status {
     font-size: 12px;
     color: #666;
 }

 .chat-time {
     font-size: 12px;
     color: #999;
 }

 /* 右侧聊天区域样式 */
 .chat-right {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .chat-header {
     padding: 20px;
     border-bottom: 1px solid #eee;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .participant-info .count {
     font-weight: 500;
     margin-right: 8px;
 }

 .participant-info .label {
     color: #666;
 }

 .chat-actions {
     display: flex;
     gap: 10px;
 }

 .action-btn {
     border: none;
     background: none;
     cursor: pointer;
     padding: 6px 12px;
     border-radius: 4px;
 }

 .action-btn.green {
     background: #4CAF50;
     color: white;
 }

 .messages {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
 }

 .message-item {
     margin-bottom: 20px;
 }

 .message-info {
     margin-bottom: 8px;
 }

 .message-info .sender {
     font-weight: 500;
     margin-right: 8px;
 }

 .message-info .time {
     color: #999;
     font-size: 12px;
 }

 .message-content {
     padding: 12px 16px;
     background: #f5f5f5;
     border-radius: 8px;
     max-width: 80%;
 }

 .message-content.teacher {
     background: #e3f2fd;
 }

 .chat-input-box {
     padding: 20px;
     border-top: 1px solid #eee;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .message-input {
     flex: 1;
     padding: 10px;
     border: 1px solid #eee;
     border-radius: 4px;
 }

 .input-actions {
     display: flex;
     gap: 8px;
 }

 .emoji-btn {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 20px;
 }

 .send-btn {
     padding: 8px 16px;
     background: #1890ff;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 /* 课程内容区域样式 */
 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
 }

 .search-box {
     position: relative;
     width: 300px;
 }

 .search-box input {
     width: 100%;
     padding: 8px 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 14px;
 }

 .upload-btn {
     padding: 8px 16px;
     background-color: #1890ff;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 /* 右侧信息栏样式 */
 .right-panel {
     width: 280px;
     background-color: white;
     padding: 20px;
     border-left: 1px solid #eee;
 }

 .earnings {
     text-align: center;
     padding: 20px 0;
 }

 .earnings-value {
     font-size: 28px;
     font-weight: bold;
     color: #333;
     margin: 8px 0;
 }

 .earnings-label {
     font-size: 14px;
     color: #666;
 }

 .country-flag {
     width: 20px;
     height: 20px;
     margin-right: 8px;
 }

 /*统计卡片样式*/


 .stats-cards {
     display: flex;
     gap: 20px;
     margin-bottom: 24px;

 }

 .stat-card {
     flex: 1;
     background-color: white;
     padding: 20px;
     border-radius: 8px;
     position: relative;
 }

 .stat-card .icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: rgba(24, 144, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
 }

 .stat-title {
     font-size: 14px;
     color: #666;
     margin-bottom: 8px;
 }

 .stat-value {
     font-size: 24px;
     font-weight: bold;
     color: #333;
 }

 .stat-desc {
     font-size: 12px;
     color: #999;
     margin-top: 4px;
 }

 /* 课程列表样式 */
 .course-list {
     background-color: white;
     border-radius: 8px;
     padding: 20px;
 }

 .list-header {
     display: flex;
     justify-content: space-between;
     padding-bottom: 16px;
     border-bottom: 1px solid #f0f0f0;
     margin-bottom: 16px;
 }

 .list-title {
     font-size: 16px;
     font-weight: 500;
 }

 .course-table {
     width: 100%;
     border-collapse: collapse;
 }

 .course-table th {
     text-align: left;
     padding: 12px 8px;
     color: #666;
     font-weight: normal;
     border-bottom: 1px solid #f0f0f0;
 }

 .course-table td {
     padding: 16px 8px;
     border-bottom: 1px solid #f0f0f0;
 }

 .course-info {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .course-image {
     width: 60px;
     height: 40px;
     border-radius: 4px;
     object-fit: cover;
 }

 .rating {
     display: flex;
     align-items: center;
     color: #faad14;
 }

 .rating .star {
     margin-right: 4px;
 }

 .status-tag {
     padding: 2px 8px;
     border-radius: 10px;
     font-size: 12px;
     background-color: #e6f7ff;
     color: #1890ff;
 }